<template>
  <div class="w_full h_full flex">
    <div class="g_left">
      <div class="gl_header flexbetween plr-16">
        <span class="fw-6 c_text2">筛选</span>
        <span class="c_primary commhover">清空条件</span>
      </div>
      <el-form
        ref="form"
        :model="queryParams"
        size="small"
        label-position="top"
        class="p-12"
      >
        <el-form-item label="选择企微号">
          <WeChat :options="options" @getValue="getValue" />
        </el-form-item>
        <el-form-item label="关键词搜索" prop="keyword">
          <el-input
            placeholder="请输入关键词"
            v-model="queryParams.keyword"
            @keyup.enter.native="handleQuery"
            class="x-input-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="是否群主/管理员">
          <el-select v-model="queryParams.region" placeholder="全部">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="群人数">
          <group-number v-model="queryParams.groupnumber" />
        </el-form-item>
      </el-form>
    </div>
    <div class="g_right">
      <el-table
        v-loading="loading"
        :data="tableList"
        class="commtable w_full"
        max-height="460"
      >
        <el-table-column
          label=""
          prop="radio"
          width="60px"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-radio v-model="scope.row.radio" label=""></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="群聊(18)" prop="userName">
          <template slot-scope="scope">
            <div class="flex aligncenter kh_box">
              <img
                src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
                alt=""
                class="useravatar"
              />
              <div class="khnamebox pl-12">
                <div class="title c_222333" style="line-height: normal">
                  {{ scope.row.title || "肖成红--" }}  <span class="c_text3">(1)</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        class="centerpagination flexcenter"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        layout='prev, pager, next, jumper'
        @pagination="getList"
      />
    </div>
  </div>
</template>
<script>
import WeChat from "@/views/components/WeChat";
import GroupNumber from "@/components/GroupNumber";
export default {
  data() {
    return {
      loading:false,
      options: [
        {
          value: 1,
          label: "小红",
          WeChatNum: 2,
          WeChatName: "智行",
        },
        {
          value: 2,
          label: "小军",
          WeChatNum: 1,
          WeChatName: "锐行",
        },
      ],
      queryParams: {},
      tableList:[{id:1,title:'城市群'}],
      total:1
    };
  },
  components: {
    WeChat,
    GroupNumber,
  },
  methods: {
    getValue(obj) {
      console.log("获取行", obj);
    },

    getList(){},
    
    handleQuery() {},
  },
};
</script>
<style lang="scss" scoped>
.g_left {
  width: 240px;
  border-right: 1px solid #e9e9e9;
}
.g_right {
  flex: 1 0;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.gl_header {
  height: 40px;
  background-color: #fafafa;
  border-bottom: 1px solid #e9e9e9;
}
.el-form {
  ::v-deep .el-form-item__label {
    padding-bottom: 5px;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
}
.useravatar{
    width: 32px;
    height: 32px;
}
.centerpagination{
    ::v-deep .el-pagination{
        position:inherit
    }
}
</style>